<template>
	<div class="home">
		<div class="home_top">
			<div class="home_top_img">
				<image src="https://wx.sjcmhz.com/static/image/index15.png"></image>
			</div>
			<div class="home_top_title" @click='urlEvent()'>
				苏江之家
			</div>
			<div class="home_top_cont">

				<div class="home_top_cont_top" v-if="isLogin">
					<div class="home_top_cont_act">
						<image :src="homeDetail.avatar_url"></image>
					</div>
					<div class="home_top_cont_name">
						欢迎您, <span>{{homeDetail.name || ''}}</span>
					</div>
					<div class="home_top_cont_dis">
						在苏江的第<span>{{homeDetail.day + 1 || 1}}</span>天 <div class="home_top_cont_dis_btn"
							@click='inviteEvent(homeDetail.status)'
							v-if="homeDetail.status == '-1' || homeDetail.status == '0' || homeDetail.status == '1' ">
							邀约处理 ></div>
					</div>
				</div>
				<div class="home_top_cont_top" v-else @click='goLogin()'>
					<div class="home_top_cont_act">

					</div>
					<div class="home_top_cont_name">
						点击注册/登录
					</div>
					<div class="home_top_cont_dis">
						登录后即可享受更多服务
					</div>
				</div>



				<div class="home_top_cont_icon">

					<div class="home_top_cont_items" v-for="(ite,idx) in list" :key="idx" @click='indexEvent(idx)'>
						<div class="home_top_cont_items_img">
							<image :src="ite.img" mode=""></image>
						</div>
						<div class="home_top_cont_items_text">
							{{ite.name}}
						</div>

					</div>
				</div>
				<!-- 公告 -->
				<div class="home_top_cont_gg">
					<div class="home_top_cont_gg_center">
						<span>通知公告</span> |
						<swiper class="notice-swiper" :circular="true" autoplay="true" interval="5000" duration="500">
							<swiper-item v-for="(ite,idx) in homeDetail.notice" :key="idx">
								<view class="notice-item ex"><u-notice-bar :text="ite"></u-notice-bar></view>


							</swiper-item>
							<!-- 更多公告项 -->
						</swiper>

					</div>
				</div>
			</div>
		</div>
		<div class="home_center_gg_space">

		</div>
		<!-- 页眉中间 -->
		<div class="home_center_gg" v-if="homeDetail.banner">
			<image :src="homeDetail.banner" mode=""></image>
		</div>
		<!-- 新闻 -->
		<div class="home_center_news">
			<div class="home_center_news_title">
				<div class="home_center_news_line">

				</div>
				最新新闻
			</div>
			<div class="home_center_news_items" v-for="(ite,idx) in homeDetail.news" :key="idx"
				@click='newsEvent(ite.news_id)'>
				<div class="home_center_news_items_left">
					<div class="home_center_news_items_left_img">
						<image :src="ite.image"></image>
					</div>
				</div>
				<div class="home_center_news_items_right">
					<div class="home_center_news_items_right_title ex">
						{{ite.title}}
					</div>
					<div class="home_center_news_items_right_dis ex">
						{{ite.sub_title}}
					</div>
					<div class="home_center_news_items_right_time">
						{{ite.addtime}}
					</div>
				</div>
			</div>
		</div>
		<!-- 成为主播 -->
		<!-- <div class="cwzb" @click='isEr=!isEr' v-if="userStatus == 0 || !userStatus">
			<image src="https://wx.sjcmhz.com/static/image/cwzb.png" mode=""></image>
		</div> -->
		<!-- 二维码 -->
		<div class="allMask" @click='isEr=!isEr' v-if="isEr">

		</div>
		<div class="erwm" @click='isEr=!isEr' v-if="isEr">
			<image src="https://wx.sjcmhz.com/WechatIMG180.jpg" mode=""></image>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {


				title: 'Hello',
				list: [{
						name: '声乐',
						img: 'https://wx.sjcmhz.com/static/image/index2.png'
					}, {
						name: '舞蹈',
						img: "https://wx.sjcmhz.com/static/image/index3.png"
					}, {
						name: '健身',
						img: "https://wx.sjcmhz.com/static/image/index8.png"
					},
				
					{
						name: '美颜',
						img: 'https://wx.sjcmhz.com/static/image/index9.png'
					}, {
						name: '声卡',
						img: 'https://wx.sjcmhz.com/static/image/index6.png'
					}, {
						name: '保洁',
						img: 'https://wx.sjcmhz.com/static/image/index7.png'
					}, 
					{
						name: '服装',
						img: 'https://wx.sjcmhz.com/static/image/index4.png'
					},{
						name: '报修',
						img: 'https://wx.sjcmhz.com/static/image/bx.png'
					}
				],
				homeDetail: {

				},
				timer: null,
				isLogin: true,
				isEr: false,
				userStatus: ''
			}
		},
		onPullDownRefresh() {
			this.getUserStatus()
		},
		onShow() {
			!uni.getStorageSync("phone") ? this.isLogin = false : this.isLogin = true
			this.timer = setInterval((res) => {
				console.log('uni.getStorageSync("access_token")', uni.getStorageSync("access_token"))
				if (!uni.getStorageSync("token")) {

				} else {
					clearInterval(this.timer)
					this.getHome()
				}
			}, 500)
			const userStatus = uni.getStorageSync('userStatus')
			this.userStatus = userStatus
			const ishow = uni.getStorageSync('ishow')
			if (userStatus == 0 || userStatus == -1) {
				if (ishow == 2) {
					uni.showLoading({
						title: '亲！请成为主播可查看...',
					})
					uni.setStorageSync('ishow', 1)
				}
				setTimeout((res) => {
					uni.hideLoading()
				}, 1500)
			}
		},
		onLoad() {
			// this.$utils.isLogin()

		},
		methods: {
			// 跳转
			indexEvent(idx) {
				console.log('indexEvent', idx)
				switch (idx) {
					case 0:
						uni.setStorageSync('moId', 0)
						uni.switchTab({
							url: '/pages/class/class'
						})
						break;
					case 1:
						uni.setStorageSync('moId', 1)
						uni.switchTab({
							url: '/pages/class/class'
						})
						break;
					case 2:
						uni.setStorageSync('moId', 2)
						uni.switchTab({
							url: '/pages/class/class'
						})
						break;
					case 3:
						uni.setStorageSync('smoId', 1)
						uni.switchTab({
							url: '/pages/server/server'
						})
						break;
					case 4:
						uni.setStorageSync('smoId', 2)
						uni.switchTab({
							url: '/pages/server/server'
						})
						break;
					case 5:
						uni.setStorageSync('smoId', 3)
						uni.switchTab({
							url: '/pages/server/server'
						})
						break;
					case 6:
						uni.setStorageSync('smoId', 4)
						uni.switchTab({
							url: '/pages/server/server'
						})
						break;
					case 7:
						uni.setStorageSync('smoId', 0)
						uni.switchTab({
							url: '/pages/server/server'
						})
						break;
				}
			},
			goLogin() {
				uni.reLaunch({
					url: '/pages/login'
				})
			},
			async getHome() {
				const {
					data
				} = await this.$request(this.$Api.indxHome, {}, "POST")
				this.homeDetail = data.data
				uni.setStorageSync('author_id', data.data.author_id)
				uni.setStorageSync('userNowStatus', data.data.status)
				console.log('datadata', data)
				this.getIndexDetail(data.data.author_id)
			},
			async getUserStatus() {
				const {
					data
				} = await this.$request(this.$Api.indexStatus, {}, "POST")
				uni.setStorageSync('userStatus',data.data.status)
		        uni.stopPullDownRefresh()
				console.log('datadata', data.data.status)
			 
			},
			// 获取主播信息
			async getIndexDetail(e) {
				const {
					data
				} = await this.$request(this.$Api.indexDetail, {
					anchor_id: e
				}, "POST")
				uni.setStorageSync('userInfo', data.data)
			},
			inviteEvent(status) {
				uni.navigateTo({
					url: '/pages/invite/invite?status=' + status
				})
			},
			urlEvent() {
				return
				uni.navigateTo({
					url: '/pagesA/index/index'
				})
			},
			newsEvent(id) {
				uni.navigateTo({
					url: '/pages/index/news?id=' + id
				})
			}
		}
	}
</script>

<style lang="less">
	.home_top {
		width: 750rpx;
		height: 706rpx;
		position: relative;
		// background: url('https://wx.sjcmhz.com/static/image/index15.png');
		// background-size: cover;

		.home_top_img {
			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.home_top_title {
			font-size: 60rpx;
			color: #fff;
			position: absolute;
			top: 126rpx;
			left: 30rpx;
		}

		.home_top_cont {
			position: absolute;
			top: 252rpx;
			left: 30rpx;
			width: 690rpx;
			height: 672rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 16rpx 10rpx rgba(36, 95, 255, 0.06);
			border-radius: 12rpx;
			padding: 35rpx 0;
			box-sizing: border-box;


			// overflow: hidden;
			.home_top_cont_top {
				padding: 0 34rpx;
				box-sizing: border-box;
				position: relative;

				.home_top_cont_act {
					position: absolute;
					width: 160rpx;
					height: 160rpx;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
					border: 8rpx solid rgba(255, 255, 255, 0.96);
					right: 56rpx;
					top: -120rpx;
					border-radius: 50%;
					background: #999;
					z-index: 999;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.home_top_cont_icon {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 6rpx;
			}

			// align-items: center;
			// justify-content: space-between;
			.home_top_cont_name {
				width: 386rpx;
				height: 56rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
				line-height: 56rpx;
				// text-align: right;
				font-style: normal;

				span {
					font-size: 28rpx;
				}
			}

			.home_top_cont_dis {
				width: 100%;
				height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: right;
				font-style: normal;
				display: flex;
				margin-top: 14rpx;
				line-height: 50rpx;

				span {
					color: #9013FE;
				}
			}

			.home_top_cont_dis_btn {
				width: 154rpx;
				height: 42rpx;
				background: #EF021F;
				border-radius: 8rpx;
				border: 2rpx solid #EF021F;
				font-size: 24rpx;
				text-align: center;
				color: #fff;
				line-height: 42rpx;
				margin-left: 12rpx;
			}

			.home_top_cont_items {
				width: 25%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
				margin-top: 36rpx;

				.home_top_cont_items_img {
					width: 106rpx;
					height: 106rpx;
				}

				.home_top_cont_items_text {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					margin-top: 12rpx;
				}

				image {
					width: 100%;
					height: 106rpx;
				}
			}

			.home_top_cont_gg {
				width: 100%;
				padding: 0 34rpx;
				box-sizing: border-box;
				background: #FFF6F1;
				margin-top: 60rpx;
				border-radius: 12rpx;
				box-shadow: 0rpx 12rpx 16rpx 10rpx rgba(36, 95, 255, 0.06);




				.home_top_cont_gg_center {
					width: 100%;
					height: 98rpx;
					font-size: 28rpx;
					line-height: 98rpx;
					position: relative;
					overflow: hidden;

					span {
						color: #DC8900;
						margin-right: 12rpx;
					}

				}
			}
		}
	}

	//
	.home_center_gg {
		width: 690rpx;
		height: 144rpx;
		border-radius: 12rpx;
		margin: 0rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.home_center_gg_space {
		width: 100%;
		height: 259rpx;
	}

	// 新闻
	.home_center_news {
		width: 750rpx;
		min-height: 492rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
		padding-bottom: 30rpx;

		.home_center_news_title {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;

			.home_center_news_line {
				width: 12rpx;
				height: 30rpx;
				background: #9013FE;
				margin-right: 12rpx;
			}
		}

		.home_center_news_items {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #DDDDDD;
			padding: 34rpx 0;

			.home_center_news_items_left {
				.home_center_news_items_left_img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 4rpx;
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 4rpx;
						background: #999;
					}
				}
			}

			.home_center_news_items_right {

				.home_center_news_items_right_title {
					width: 560rpx;
					font-size: 32rpx;
				}

				.home_center_news_items_right_dis {
					width: 560rpx;
					font-size: 24rpx;
					color: #999999;
					margin-top: 14rpx;
				}

				.home_center_news_items_right_time {
					color: #999999;
					font-size: 24rpx;
					margin-top: 18rpx;
				}
			}

		}

		.home_center_news_items:last-child {
			border: none;
		}

	}

	.cwzb {
		width: 114rpx;
		height: 124rpx;
		position: fixed;
		right: 22rpx;
		bottom: 10%;
	}

	.erwm {
		position: fixed;
		width: 608rpx;
		height: 938rpx;
		left: 71rpx;
		top: 15%;
		z-index: 999;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>